<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
</body>
<script>
	const projection = ol.proj.get('EPSG:3857');
	// projection.setExtent([-180.00000000000003, -85.05112877980652, 180.00000000000003, 85.05112877980646]);
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	console.log(projectionExtent);
	const origins = [
		[-180.0, 90.0],
		ol.extent.getTopLeft(projectionExtent)
	];
	const origin = origins[1];
	console.log('origin:', origin);
	console.log('projection:', projection);
	console.log('projectionExtent', projectionExtent);

	const size = ol.extent.getWidth(projectionExtent) / tileSize;

	const resolutions = [];
	const matrixIds = [];
	for (let z = 1; z < 21; z++) {
		resolutions[z - 1] = size / Math.pow(2, z - 1);
		matrixIds[z - 1] = (z - 1).toString();
	}
	console.log(resolutions);
	console.log(matrixIds);
	console.log(resolutions.toString());

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions: resolutions,
		extent: projectionExtent,
		matrixIds: matrixIds
	});

	// const url = `http://t0.tianditu.gov.cn/vec_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
	const url = `http://t0.tianditu.gov.cn/vec_w/wmts?tk=695f6f53c1c0087ed8ab5b52f7c446bb`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'vec',
		matrixSet: 'w',
		format: 'tiles',
		projection: projection,
		tileGrid: tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	const circlePoint = ol.proj.transform([120.01016360059053, 30.282672319591747], 'EPSG:4326', 'EPSG:3857');
	// console.log(circlePoint);
	const points = [
		[0, 0],
		[12955887.989156704, 4849958.044121415],
		circlePoint
	];
	const centerPoint = points[2];

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(centerPoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [10, 26],
			anchorXUnits: 'pixels',
			anchorYUnits: 'pixels',
			src: '../image/position_orange.png'
		})
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature],
		wrapX: false
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const map = new ol.Map({
		layers: [
			baseLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 1,
			maxZoom: 20,
			minZoom: 1
			// resolutions
		})
	});


	const canvas = document.getElementById('canvas');
	const vectorContext = ol.render.toContext(canvas.getContext('2d'), {
		size: [100, 100]
	});
	const fill = new ol.style.Fill({
		color: 'blue'
	});
	const stroke = new ol.style.Stroke({
		color: 'red',
	});
	const style = new ol.style.Style({
		fill,
		stroke,
		image: new ol.style.Circle({
			radius: 10,
			fill,
			stroke
		})
	});
	vectorContext.setStyle(style);

	vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
	vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
	vectorContext.drawGeometry(new ol.geom.Point([88, 88]));
</script>
</html>